<template>
	<div>
		<mt-swipe :auto="4000">
		  <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
		  	<img :src="item.url" alt="">
		  </mt-swipe-item>
		</mt-swipe>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/tabbar/menu1.png" alt="can`t find" />
		                    <div class="mui-media-body">新闻资讯</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/tabbar/menu2.png" alt="can`t find" />
		                    <div class="mui-media-body">图片分享</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/tabbar/menu3.png" alt="can`t find" />
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/tabbar/menu4.png" alt="can`t find" />
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/tabbar/menu5.png" alt="can`t find" />
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/tabbar/menu6.png" alt="can`t find" />
		                    <div class="mui-media-body">联系我们</div></a></li>
		        </ul> 
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'

	export default {
		data(){
			return {
				lunbotuList:[
					{url:'http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg',id:'1'},
					{url:'http://ofv795nmp.bkt.clouddn.com/vuelogobanner2.jpg',id:'2'},
					{url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538625673190&di=c6baacfa241e855cad35b68b9f6728e4&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F17%2F56%2F27%2F12S58PIC89m_1024.jpg',id:'3'}
				]
			}
		},
		
		methods: {
    
    }
  
	}

</script>

<style lang="scss" scoped>
	.mint-swipe {
		height:200px;
		.mint-swipe-item{
			&:nth-child(1){
			 background-color:blue;
			}
			&:nth-child(2){
			 background-color:lightblue;
			}
			&:nth-child(3){
			 background-color:cyan;
			}
			img{
			width:100%;
			height:100%;
			}
		}
	}
	.mui-grid-view.mui-grid-9{
	 background:white;
	 border:0;
	 .mui-table-view-cell{
	 		border:0;
	 		img{
	 		 width:60px;
	 		}
	 		.mui-media-body {
	 		font-size:13px;
	 		}
	 }
	}
	
</style>